<!--
 * @Author: kls
 * @Date: 2023-03-14 12:33:51
 * @LastEditTime: 2023-03-14 14:40:36
 * @LastEditors: kls
 * @Description: 
 * @FilePath: \jnks-shengpingtai\src\views\login\index.vue
-->
<template>
  <div class="login-container">
    <Header class="header" ishow="login"></Header>
    <div class="login-form">
      <div class="login-title">
        <span>账号登录</span>
      </div>
      <div class="login-input">
        <div class="login-border">
          <img
            class="form-img"
            src="./assets/icon-user.png"
            title="用户名"
            alt="账号"
          />
          <el-input
            class="form-ipt"
            v-model="form.name"
            placeholder="请输入用户名"
            @keyup.enter.native="onSubmit()"
          ></el-input>
        </div>
      </div>
      <div class="login-input">
        <div class="login-border">
          <img
            class="form-img"
            src="./assets/icon-password.png"
            title="密码"
            alt="密码"
          />
          <el-input
            class="form-ipt"
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            show-password
            @keyup.enter.native="onSubmit()"
          ></el-input>
        </div>
      </div>
      <div class="login-button">
        <el-button v-if="!loading" class="form-btn" @click="onSubmit()">
          {{ "点击登录" }}
        </el-button>
        <el-button v-if="loading" class="form-btn">
          <i class="el-icon-loading"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header";
export default {
  components: { Header },
  data() {
    return {
      form: {
        name: "",
        password: "",
      },
      loading: false,
    };
  },
  methods: {
    /**
     * @description:登录
     */
    onSubmit() {
      if (this.form.name == "") {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
        return;
      }
      if (this.form.password == "") {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
        return;
      }
      this.loading = true;
      const storage = JSON.parse(
        decrypt(localStorage.getItem("authorizationCodeName"))
      );
      let str = setRsa(
        this.form.name +
          "@@" +
          this.form.password +
          "@@" +
          this.type +
          "@@" +
          storage.value
      );
      publicLogin({ cipherText: str })
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.$message({
              message: "登录成功！",
              type: "success",
            });
            localStorage.setItem("Authorization", res.token);
            this.$router.push(`/`);
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
//要多次使用的代码
.middle() {
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-container {
  height: 100vh;
  background: url("./assets/back-login.png") no-repeat;
  background-size: 100% 100%;
  .header {
    width: calc(100% - 1px);
    height: 11%;
    position: absolute;
    top: 0;
    z-index: 20;
  }
  .login-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 22%;
    right: 10%;
    width: 580px;
    height: 501px;
    background: url("./assets/back-loginform.png") no-repeat;
    background-size: 100% 100%;
    .login-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30%;
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
    }
    .login-input {
      width: 70%;
      height: 16%;
      .login-border {
        .middle;
        border-bottom: 1px solid #293e4c;
        ::v-deep .el-input__inner {
          color: #ffffff;
          font-size: 18px;
          background-color: transparent;
          border: unset;
        }
      }
    }
    .login-button {
      .middle;
      width: 100%;
      height: 30%;
      ::v-deep .el-button {
        width: 70%;
        height: 35%;
        border: 1px solid #02c5e8;
        background-color: #047188;
        color: #ffffff;
        font-size: 18px;
      }
    }
  }
}
</style>
